<template>
    <div class="google">
        <PersonalHeader :content="1"></PersonalHeader>

        <section class="googlemain">
            <section class="type">
                <h2 class="title"> {{$t('google[0]')}}
                    <p> {{$t('google[1]')}}</p>
                </h2>
                <ul class="contt">
                    <li class="list">
                        <h2 class="h2">
                            <i>1</i>{{$t('google[2]')}}
                            
                        </h2>
                        <p>{{$t('google[3]')}}<br>
                        {{$t('google[4]')}} </p>
                        <div class="dolurl">
                            <a href="https://itunes.apple.com/cn/app/google-authenticator/id388497605" target="_blank" style="margin-right: 20px;">
                                <img :src="require('_img/app-store@2x.png')" alt="" >
                            </a>
                            <a href="https://android.myapp.com/myapp/detail.htm?apkName=com.google.android.apps.authenticator2&ADTAG=mobile" target="_blank">
                                <img :src="require('_img/Google Play@2x.png')" alt="">
                            </a>
                        </div>
                    </li>
                     <li class="list">
                        <h2 class="h2">
                            <i>2</i>
                            {{$t('google[5]')}}
                        </h2>
                        <p>{{$t('google[6]')}}</p>
                        <div class="miyao">
                            <img :src="createGoogleSecretdata.code_url" alt="">
                            <h2>
                                <p>{{$t('google[7]')}}</p>
                                <p>{{createGoogleSecretdata.secret}}</p>
                            </h2>
                            <h3 @click="copy(createGoogleSecretdata.secret)">{{$t('google[8]')}}</h3>
                        </div>
                    </li>
                    <li class="list">
                        <h2 class="h2">
                            <i>3</i>
                            {{$t('google[9]')}}
                            
                        </h2>
                        <el-form label-position="top" label-width="80px" :model="formLabelAlign">
                            <el-form-item :label="$t('google[9]')">
                                <el-input v-model="formLabelAlign.google_code" :placeholder="$t('google[10]')"></el-input>
                            </el-form-item>
                        </el-form>
                    </li>
                    <!-- <li class="list">
                        <h2 class="h2">
                            <i>4</i>
                            {{$t('google[11]')}}
                        </h2>
                        <el-form label-position="top" label-width="80px" :model="formLabelAlign">
                            <el-form-item :label="$t('mobile[9]')" prop="code">
                                <el-input v-model="formLabelAlign.code" :placeholder="$t('zijin[5]')" >
                                    <template slot="append">
                                        <el-button @click="Verificationfun()">{{Verification.text}}</el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-form>
                    </li> -->
                    <li class="list">
                        <el-button type="primary" @click="handleSubmit" :loading="loading">{{$t('senior[8]')}}</el-button>
                    </li>
                </ul>
            </section>
        </section>
    </div>
</template>

<script>
import { createGoogleSecret, authenticatorBind } from '@/api/securitycenter'
import PersonalHeader from "_dom/personalheader";
import { Passwordencryption, EmailSms } from "@/libs/util";
export default {
    name: 'google',
        data () {
             
            return {
                formLabelAlign:{
                    v_code:"",
                    google_code:"",
                    google_secret:"",
                },
                createGoogleSecretdata:"",
                Verification:{
                    text:  this.$t('reg[0]'),
                    time: 60,
                    type: true,
                    timer: "",
                },
                loading: false,
            }
        },
        methods: {
          copy(content) {
            var aux = document.createElement("input");
            aux.setAttribute("value", content);
            document.body.appendChild(aux);
            aux.select();
            document.execCommand("copy");
            document.body.removeChild(aux);
            this.$message({
                type:'success',
                message:this.$t('fog[4]')
            });
          },
            handleSubmit(){//修改资金密码
                let _data = this.formLabelAlign;
                // if(!_data.code){
                //     this.$message.error(this.$t('google[12]'));
                //     return false;
                // };
                if(!_data.google_code){
                    this.$message.error(this.$t('google[13]'));
                    return false;
                };
                this.loading = true;
                authenticatorBind(_data).then(res => {
                    this.loading = false;
                        this.$message({
                            message: this.$t('google[14]'),
                            type: 'success'
                        });
                        setTimeout(() => {
                            this.$router.push({ path:"/securitycenter" });
                        }, 800);
                   
                }).catch(err => {

                });

            },
            Verificationfun(){
                if(!this.Verification.type){
                    return false;
                }
                var _data = {
                    type: "3",
                    phone: this.$store.state.user.phone?this.$store.state.user.phone:this.$store.state.user.email,
                };
                this.$public.captcha(_data, this);
            },
            typecaptcha(){
                this.Verification.type = false;
                this.Verification.timer = setInterval(() => {
                    this.Verification.time--;
                    if(this.Verification.time< 1){
                        clearInterval(this.Verification.timer);
                        this.Verification.type = true;
                        this.Verification.time = 60;
                        this.Verification.text = this.$t('reg[1]');
                    }else{
                        this.Verification.text = this.Verification.time + "S";
                    }
                }, 1000);
            },
            getdata(){
                createGoogleSecret().then(res => {
                        this.createGoogleSecretdata = res.createSecret;
                        this.formLabelAlign.google_secret = res.createSecret.secret;
                }).catch(err => {

                });
            }
        },
        created(){
            this.getdata();
        },
        beforeEach: function(to, from, next){
            clearInterval(this.Verification.timer);
            next();
        },
        components: {
            PersonalHeader
        },
    }
</script>

